{% extends "aside/erp/base.html" %}
{% load staticfiles %}
{% block custom_tdk %}
    <title>产品库存管理 - WanFeng</title>
    <meta name="description" content="产品库管理">
    <script src="{% static '' %}aside/scripts/app/jquery-1.10.2.min.js"></script>
    <style>
    .keyword-group{ clear:both; margin-top:5px; height:60px; overflow-y:auto; border:1px solid #CFD9DB; background-color:#fff; padding:5px; min-height:20px;}
.keyword-group .keyword-label{ display:inline-block; vertical-align:baseline; border-radius:3px; background: #EFEFEF; color: #333;margin: 0 4px 2px 0;padding: 1px 5px; line-height:22px;}
.keyword-group .keyword-label:hover{ background-color:#e8e8e8;}
.keyword-group .keyword-label .close{ margin-left:5px;}

.keyword-group.min{ height:36px;}


.keyword-group .keyword-label.flicker{-webkit-animation: flickerShadow 2s linear infinite;-moz-animation: flickerShadow 2s linear infinite;  animation: flickerShadow 2s linear infinite;}

    </style>
{% endblock %}

{% block page-title %}产品库存管理{% endblock %}

{% block app-footer %}
    <div class="app-footer white bg p-a b-t">


    <div class="pull-right text-sm text-muted"></div>
    <span class="text-sm text-muted">WanFeng &copy; Copyright. Version 4.0.1</span>
</div>
{% endblock %}

{% block app-body %}


<input type="hidden" id="UserID" name="UserID" value="{{ request.user.id }}"/>

<div class="padding">
<div class="box">
<div class="row p-a-1">
<form name="searchFrom" action="" id="searchFrom">
    <input type="hidden" id="status" name="status" value="0"/>
    <div class="col-md-12 pl0">
        <label class="title pt5 p-r-1">搜索内容:</label>
            <label class="radio-inline p-r-1">
                <input type="radio"  value="sku" name="type" checked="" >库存sku编号
            </label>
            <label class="radio-inline p-r-1">
                <input type="radio" value="chinese_name" name="type" >中文名称
            </label>
            <label class="radio-inline p-r-1">
                <input type="radio" value="english_name" name="type" >英文名称
            </label>
            <div class="btn-group ml15 p-r-1">
                <div class="input-group" style="width: 520px;">
                    <input type="text" class="form-control" name="searchTxt" placeholder="关键字搜索"  {% if searchTxt %}value="{{ searchTxt }}"{% endif %}>
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-primary stock-search-form-click"><i class="ico-search mr5"></i>搜索</button>
                    </div>
                </div>
            </div>

    </div>

    <div class="col-sm-12 m-t-1">
        订单时间：
        <span class="label m-r-1 setDate" data-val="0"><a href="javascript:">全部</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="1" onclick="$('#status').val(1)"><a href="javascript:">自动创建</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="2"><a href="javascript:">等待开发</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="3"><a href="javascript:">正常销售</a></span>
        <span class="label m-r-1 white text-dark setDate orange" data-val="4"><a href="javascript:">商品清仓</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="5"><a href="javascript:">停止销售</a></span>
    </div>
    </form>
   <hr/>

    <div class="col-sm-12 m-t-1 m-b-1">
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
                <i class="ico-edit"></i><span class="text mr5 ml5">批处理功能</span><span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-left" role="menu">
                {% comment %}<li><a href="javascript:void(0)" onclick="getBatchEdit()">修改商品信息</a></li>
                <li><a href="javascript:void(0)" onclick="getModifyInventory()">快速调整库存</a></li>
                <li><a href="javascript:void(0);" onclick="doBatchChangeGridCode();">修改仓位</a></li>{% endcomment %}
                <li><a href="javascript:void(0);" onclick="showBatchMerge();" data-toggle="modal" data-target="#Merge">商品合并</a></li>
                {% comment %}<li><a href="javascript:void(0);" id="getRemoteModal">添加分类</a></li>
                <li><a href="javascript:void(0);" onclick="selectProductToPrintCenter()">打印中心</a></li>{% endcomment %}
                <li><a href="javascript:void(0);" class="text-danger" onclick="showBatchRemove();">批量删除</a></li>
            </ul>
        </div>
    </div>

<div class="table-responsive">

    <table class="table table-striped table-hover b-t">
        <thead>
        <tr>
            <th style="width:20px"><label class="ui-check m-a-0">
                <input type="checkbox" id="action-toggle">
                <i></i></label></th>

            <th>SKU图片</th>
            <th>库存SKU商品中文名</th>
            <th>状态</th>
            <th>商品目录</th>
            <th>采购员</th>
            <th>库存总量(个)</th>
            <th>未发货数量</th>
            <th>销量(7/28/42)</th>
            <th>重量（g）</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="goodsListBox">
        {% for sku in productData %}
        <tr data-val="{{ sku.ID }}" >
            <td><label class="ui-check m-a-0">
                <input type="checkbox" name="post[]">
                <i class="dark-white"></i></label></td>
            <td><img src="{{ sku.image }}" class="w-48 img-responsive" alt="{{ sku.IMAGE }}"/></td>
            <td>{{ sku.sku }} <br/>
                {{ sku.chinese_name }}
            </td>
            <td>{{ sku.status }} </td>
            <td>{{ sku.category }}</td>
            <td></td>
            <td data-val="{{ sku.ID }}" data-stock="{{ sku.realStock }}"><span>{{ sku.realStock }}</span> <i class="fa fa-edit editSKUStock" data-toggle="modal" data-target="#modal-editSKUStock" ></i></td>
            <td>{{ sku.unSendCount }}</td>
            <td>{{ sku.sellCount1 }}/{{ sku.sellCount2 }}/{{ sku.sellCount3 }}</td>
            <td>{{ sku.weight }}</td>
            <td>
                <a class="text-success underline" href="" target="_blank">编辑</a><br/>
                <a class="text-danger  underline" href="javascript:void(0);">删除</a>

            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div id="modal-editSKUStock" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑库存 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>
            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" id="editStockForm" action="" method="post">
                    {% csrf_token %}
                    <input type="hidden" id="SKUID" name="SKUID" value="0"/>
                    <div class="" id="editStockItems">
                        <div class="form-group row">
                        <label for="editSubjectEn" class="col-sm-4 form-control-label">库存：</label>
                            <div class="col-sm-8">
                                 <input class="form-control" type="number" id="realStock" name="realStock" value="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="button"  onclick="editStock();" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="Merge" class="modal fade" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<form name="frmMergeStockSku" class="modal-content form-horizontal form-bordered advance-search" action="" parsley-validate="">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">×</button>
					<h4 class="modal-title">商品合并</h4>
					<p class="text-muted mt5 text-center mb0">
						由于本地SKU和平台上的SKU不一致，经常导致订单在下载时匹配错误，例如:<br>

					</p>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<!-- panel body -->
							<div class="form-group">
								<label class="col-sm-3 control-label"><span class="text-danger mr5">*</span>被合并SKU</label>
								<div class="col-sm-9">
									<div class="input-group labelkeyword">
										<input placeholder="输入SKU" type="text" value="" class="form-control keyword">
										<span class="input-group-btn">
											<a href="javascript:void(0);" class="btn btn-success"><i class="ico-plus mr5"></i>添加</a>
										</span>
									</div>
									<div class="keyword-group">
                                        <div class="keyword-label">32692063210
                                            <input type="hidden" value="32692063210" name="stockSkuStr[]">
                                            <button type="button" class="close">×</button>
                                        </div>
                                    </div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label"><span class="text-danger mr5">*</span>目标库存SKU</label>
								<div class="col-sm-6">
									<input type="text" class="form-control" name="mergeToSku" value="">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" onclick="doMergeStockSku(this)">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
			</form><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
<div id="modal-edit" class="modal black-overlay" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加采购 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>
            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3">
                <form role="form" id="editSubjectForm" action="" method="post">
                    {% csrf_token %}
                    {% comment %}<input type="hidden" id="skuid" name="skuid" value="0"/>{% endcomment %}
                    <div class="" id="editSubjectItems">
                        <div class="form-group row">
                        <label for="editSubjectEn" class="col-sm-2 form-control-label">采购SKU编码：</label>
                            <div class="col-sm-10">
                                 <input class="form-control" type="text" id="SKU" name="NUMBERS" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                        <label for="editSubjectEn" class="col-sm-2 form-control-label">采购数量：</label>
                            <div class="col-sm-10">
                                 <input class="form-control" type="text" id="QTY" name="NUMBERS" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                        <label for="editSubjectEn" class="col-sm-2 form-control-label">采购金额：</label>
                            <div class="col-sm-10">
                                 <input class="form-control" type="text" id="PRICE" name="NUMBERS" value="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="editSubjectEn" class="col-sm-2 form-control-label">备注：</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" id = "NOTE" name="NOTE" value="">
                            </div>
                        </div>
                    </div>

                    <div class="form-group row m-t-md">
                        <div class="col-sm-offset-2 col-sm-12">
                            <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                            <button type="button" id="saveButton" class="btn success p-x-md">提交</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>



<footer class="light lt p-a">
    <div class="row">
        <div class="col-sm-2 text-left"><small class="text-muted inline m-t-sm m-b-sm">第 1-30 /共 {{ totalCount }} 条</small></div>
        <div class="col-sm-10 text-right text-center-xs">
            <ul class="pagination m-a-0">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                {% for pp in pageData %}
                    <li{% if pp.active %} class="active"{% endif %}><a href="?page={{ pp.page }}{% if status %}&status={{ status }}{% endif %}{% if searchType %}&searchType={{ searchType }}{% endif %}{% if searchTxt %}&searchTxt={{ searchTxt }}{% endif %}{% if goodsStock %}&goodsStock={{ goodsStock }}{% endif %}">{{ pp.page }}</a></li>
                {% endfor %}

                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
            </ul>
        </div>

    </div>
</footer>
</div>
</div>

<script>
    //读取实际库存到model
    $(document).on('click', '.editSKUStock', function() {
         var SKUID = $(this).parent().attr('data-val');
         var realStock= $(this).parent().attr('data-stock');
         $("#SKUID").val(SKUID);
         $("#realStock").val(realStock);
     });
    //修改实际库存
    function  editStock() {
        var id = $("#SKUID").val();
        var stock = $("#realStock").val();
        var data = {id:id,stock:stock};
        $.getJSON('/erp/editProductStock',data=data,function(result){
            if(result.status==1){
                    alert('修改成功');
                    $('#modal-editSKUStock').modal('hide');
                    window.location.reload();
                }else{
                    alert('修改失败！');
             }
        });
     }



     //商品合并sku复选
			$(".labelkeyword .btn-success").on("click",function(){
				var addNew=$(this).parents(".form-group").find(".keyword");
				var keywordBox=$(this).parents(".form-group").find(".keyword-group");
				if(addNew.val().length>=1){
					if($('input[name="stockSkuStr[]"][value="'+addNew.val()+'"]').val() != addNew.val())
					{
						keywordBox.append('<div class="keyword-label">'+addNew.val()+'<input type="hidden" name="stockSkuStr[]" value="'+addNew.val().replace(/\"/g,"&quot;")+'"><button class="close" type="button">×</button></div>');
						addNew.val("");
					}
					else
					{
						$.gritter.add({
							class_name:'gritter-error',
							title: "输入错误",
							text: "此SKU已在下面列表中，不能重复添加",
							time: 2000,
							sticky: false
						});
					}
				}else {
					$.gritter.add({
						class_name:'gritter-error',
						title: "输入错误",
						text: "SKU不能为空",
						time: 2000,
						sticky: false
					});
					addNew.focus();
				};
			});
    //跳转到采购
     function  addPage(id,sku) {
            $("#SKUID").val(id);
            $("#SKU").val(sku);
      }
    //刪除功能
    $(document).on('click', '#saveButton', function() {
        var productId = $('#productId').val();
        var data={productId:productId}
        $.getJSON('/erp/delProductLibrary/',data,function(result){
                if(result.status==1){
                    alert('删除成功');
                    $('#modal-edit').modal('hide');
                    //window.location.reload();
                }else{
                    alert('删除失败！');
                }
         });
    });


</script>

{% endblock %}
